<template>
	<view class="content">
		<uni-loding :loading='loading'></uni-loding>
		<image src="https://car.jokerfan.com/files/img/2025/08/05/1754382622055790.jpg" mode="widthFix" class="img">
		</image>
		<view class="title">用车指南</view>
		<u-sticky>
			<u-tabs :list="nav" :keyName="'title'" @click="hasNav"></u-tabs>
		</u-sticky>
		<view class="main-box">
			<block v-for="(e,i) in listData" :key="i">
				<view class="car-list-box" @click="jump(e.sn,e.title)">
					<view class="car-img">
						<image :src="e.img" mode="widthFix" class="img"></image>
					</view>
					<view class="car-name u-line-1">{{e.title}}</view>
					<view class="car-tip-box">
						<u-icon name="eye-fill" color="#d8d8d8" size="16" labelSize="14" labelColor="#999" space="4"
							:label="e.count"></u-icon>
						<!-- <view class="icon-line"></view>
						<u-icon name="chat-fill" color="#d8d8d8" size="16" labelSize="14" labelColor="#999" space="4"
							:label="e.look"></u-icon> -->
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				navNum: 0,
				nav: [],
				listData: [],
				page: 1,
				perpage: 1,
				totole: 0,

			}
		},
		onLoad() {
			this.hasNavList();
		},
		methods: {
			hasNavList() {
				this.$func.request('/car/guide_model').then(res => {
					this.nav = res.data.datas;
					this.hasGuideList(res.data.datas[0].id)
				}).catch(error => {
					this.loading = false
				})
			},
			hasNav(item) {
				console.log('item', item);
			},
			hasGuideList(id) {
				this.$func.request('/car/guide?page=1&per_page=30&model_id=' + id).then(res => {
					this.listData = res.data.data;
				}).catch(error => {
					this.loading = false
				})
			},
			jump(sn, title) {
				uni.navigateTo({
					url: '/promotionpages/car/guide_detail?sn=' + sn + '&title=' + title
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		height: 100vh;
		width: 100%;
		overflow: auto;
		background: #f7f7f7;
		box-sizing: border-box;
	}

	.main-box {
		column-count: 2;
		column-gap: 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.car-list-box {
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		overflow: auto;
		background: #fff;
		break-inside: avoid;
	}

	.img {
		width: 100%;
		vertical-align: top;
	}

	.car-name {
		color: #111;
		font-size: 28rpx;
		font-weight: bold;
		margin: 8rpx 0 8rpx 20rpx;
	}

	.car-tip-box {
		display: flex;
		margin-left: 20rpx;
		padding-bottom: 20rpx;
	}

	.icon-line {
		width: 20rpx;
	}

	.title {
		padding: 20rpx 20rpx 0;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>